<template>
<div>

<el-row>

	<el-form :inline="true" :model="form" >
		

		<el-form-item >
		    <el-input v-model="form.login_name" placeholder="用户名"></el-input>
		</el-form-item>

	    <el-form-item >
		    <el-input v-model="form.name" placeholder="姓名"></el-input>
		</el-form-item>

		<!-- <el-form-item >
		    <el-input v-model="form.login_flag" placeholder="状态"></el-input>
		</el-form-item> -->

		<el-form-item>
		    <el-button type="primary" @click="init">查询</el-button>
		</el-form-item>

		<el-form-item>
		    <el-button type="success" @click="addUser">添加用户</el-button>
		</el-form-item>

	</el-form>
	</el-row>

	<el-row>

	<el-table
	    :data="subUserList.results"
	    border
	    style="width: 100%">
	    <el-table-column
	      prop="login_name"
	      label="用户名"
	      width="100">
	    </el-table-column>
	    <el-table-column
	      prop="name"
	      label="姓名"
	      width="100">
	    </el-table-column>
	    <el-table-column
	      prop="rolenames"
	      label="角色"
	      width="150">
	    </el-table-column>
	    <el-table-column
	      prop="create_time"
	      label="创建时间"
	      width="200">
	    </el-table-column>
	    <el-table-column
	      label="操作">
	      	<template slot-scope="scope">
	      		<el-button type="success" size="mini" 
	      		icon="el-icon-edit" circle
	      		@click="edit(scope.row)">
	      		</el-button>
	      		<el-button type="danger" size="mini" 
	      		icon="el-icon-delete" circle
	      		@click="del(scope.row)">
	      		</el-button>
	      	</template>
	    </el-table-column>
	  </el-table>

	</el-row>


	<el-row class="text-right mt20 mb20">
	<el-pagination
	  @size-change="handleSizeChange"
	  @current-change="handleCurrentChange"
	  :current-page="pageNo"
	  :page-size="pageSize"
	  layout="total, sizes, prev, pager, next"
	  :total="subUserList.totalRecord">
	</el-pagination>
</el-row>


<el-dialog title="添加用户" width="70%" :visible.sync="userDialogFormVisible">
  	<el-form ref="device"
		label-width="180px"	
		>

		
		<el-form-item label="账号:" >
			<el-input v-model="userForm.login_name"></el-input>
		</el-form-item>
		<!-- <el-form-item label="密码:" >
			<el-input v-model="userForm.password"></el-input>
		</el-form-item> -->
		<el-form-item label="姓名:" >
			<el-input v-model="userForm.name"></el-input>
		</el-form-item>
		<el-form-item label="电话:" >
			<el-input v-model="userForm.mobile"></el-input>
		</el-form-item>

		<el-form-item label="角色:" >
			<el-checkbox 
			v-for="(item, index) in roleList" 
			v-model="checked5" :key="index" :label="item.role_id" border size="medium">
			{{item.role_name}}
			</el-checkbox>
		</el-form-item>

	</el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="userDialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="createUser">确 定</el-button>
  </div>
</el-dialog>

</div>
</template>

<script>

import { mapGetters } from 'vuex'

export default {
	
	name : 'user',
	
	data () {
		return {
		  	pageNo : 1,
			pageSize : 10,

			gridid : this.obj.id,

			parentGrid : this.obj,

			form : {},
			subUserList : {},

			userDialogFormVisible : false,

			userForm : {},

			roleList : [],

			checked5 : [],

			what : '',
		}
	},

	props : {
		obj: {
			type: Object,
			default () {
				return {}
			},
		}
	},

	components : {
		
	},

	computed : {
		...mapGetters([
			
		]),
	},

	methods : {
		handleSizeChange (val) {
			this.pageSize = val;
			this.init();
		},

		handleCurrentChange (val) {
			this.pageNo = val;
			this.init();
		},

		init () {
			this.$http({
				fun : 'subUserList',
				grid_id : this.gridid,
				login_name : this.form.login_name,
				name : this.form.name,
				pageNo : this.pageNo,
				pageSize : this.pageSize,
				cb : res => {
					console.log('subUserList');
					console.log(res);
					this.subUserList = res;
				}
			});

			
		},

		addUser () {
			this.what = 'add';
			this.userForm = {};
			this.checked5 = [];
			this.userDialogFormVisible = true;
		},

		createUser () {

			console.log('createUser');
			let para = {
				fun : 'createUser',
				
				login_name : this.userForm.login_name,
				password : '000000',
				mobile : this.userForm.mobile,
				name : this.userForm.name,
				rolelist : this.checked5.join(','),
				cb : res => {
					console.log(res);
					this.$message.success('操作成功');
					this.userDialogFormVisible = false;
					this.init();
				}
			};

			if(this.what == 'add'){
				para['grid_id'] = this.gridid;
				// para['parent_ids'] = this.currentGrid.parent_ids;
				// para['type'] = this.currentGrid.type;
			}else if(this.what == 'edit'){
				para['id'] = this.userForm.id;
			}

			this.$http(para);

		},

		edit (item) {

			console.log(item);
			this.what = 'edit';
			this.userForm = item;
			this.userDialogFormVisible = true;

			this.checked5 = item.roleids.split(',');
		},

		del (item) {
			console.log(item);

			this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
	          confirmButtonText: '确定',
	          cancelButtonText: '取消',
	          type: 'warning'
	        }).then(() => {

	        	this.$http({
					fun : 'updateUser',
					id : item.id,
					del_flag : 1,
					cb : res => {
						console.log(res);
						this.$message.success('操作成功');
						this.init();
					},
					err : res => {
						this.$message.error('操作失败');
					}
				});
	          
	        }).catch(() => {
	                   
	        });
		},
	},

	watch : {
	    
	},

	mounted () {
		this.init();

		this.$http({
			fun : 'roleList',
			cb : res => {
				console.log('rolelist');
				console.log(res);
				this.roleList = res;
			}
		});
	},

}
</script>

<style scoped>

</style>
